<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @closed="close"
      @open="openfn"
    >
      <!-- {{ tabledata }} -->
      <ztable :datas="tabledata" :tablecolumn="tablecolumn" />
      <zform
        ref="formz"
        colspan="12"
        label-position="left"
        labelwidth="100px"
        :nowdata="formdata"
        :nowinputs="inputs"
      >
        <template #ggs>
          <el-form-item label="产品规格" status-icon>
            <div>
              <div class="baseflex">
                <div style="width: 276px; padding-right: 20px">
                  <el-input v-model="ggsstr" placeholder="产品规格" />
                </div>
                <el-button size="small" type="primary" @click="ggsdataadd">
                  添加规格
                </el-button>
              </div>
              <div class="baseflex" style="padding-top: 8px">
                <el-button
                  v-for="(item, key) in ggsdata"
                  :key="key"
                  round
                  size="small"
                  type="primary"
                >
                  <div class="baseflex">
                    {{ item }}
                    <i
                      class="iconfont iconchacha"
                      style="font-size: 12px; margin-left: 4px"
                      @click="ggsdatadel(key)"
                    ></i>
                  </div>
                </el-button>
              </div>
            </div>
          </el-form-item>
        </template>
      </zform>
      <template #footer>
        <el-button
          v-if="formdata.b_zt == 0 || formdata.b_zt == 1"
          :loading="loading"
          type="primary"
          @click="updatafn"
        >
          确定
        </el-button>
        <el-button
          v-if="!(formdata.b_zt == 0 || formdata.b_zt == 4)"
          :loading="loading"
          type="primary"
          @click="wordlook"
        >
          查看合同
        </el-button>
        <slot name="btnslot"></slot>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
    <worddow ref="worddow" />
  </div>
</template>
<script>
  import zform from '@/components/zFrom/zFrom'
  import ztable from '@/components/zTable/index'
  import worddow from './worddow.vue'
  export default {
    name: 'afterlistxjpd',
    components: {
      zform,
      ztable,
      worddow,
    },
    emits: ['edtdatafn'],
    data() {
      return {
        tablecolumn: [
          { label: '名称', value: 'mc' },
          { label: '数量', value: 'sl' },
          { label: '规格', value: 'gg' },
        ],

        ggsstr: '',
        ggsdata: [],
        dialogVisible: false,
        title: '详情',
        inputs: [],
        inputs0: [
          { label: '姓名', value: 'uxm', readonly: 'readonly' },
          { label: '电话', value: 'utel', readonly: 'readonly' },
          { label: '收货地址', value: 'dzsh', readonly: 'readonly' },
          { label: '留言', value: 'ly', readonly: 'readonly' },
          { label: '接受订单', value: 'ddzt', span: 24, type: 'switch' },
          {
            label: '发货时间',
            value: 'sjfhyj',
            if: 'ddzt',
            zhi: ['1'],
            type: 'datetimerange',
            itemtype: 'date',
            defaultValue: new Date(),
          },
          {
            label: '备注',
            value: 'bz',
            if: 'ddzt',
            zhi: ['1'],
          },
          {
            label: '合同类型',
            value: 'htlx',
            if: 'ddzt',
            type: 'radio',
            option: [
              { label: '买断', value: '0' },
              { label: '日供', value: '1' },
              { label: '合作', value: '2' },
            ],
            defaultValue: '0',
            zhi: ['1', '2', '3'],
            span: 24,
          },
          {
            label: '拒绝原因',
            value: 'bz',
            if: 'ddzt',
            zhi: ['0'],
            span: 24,
          },
        ],
        inputs1: [
          { label: '姓名', value: 'uxm', readonly: 'readonly' },
          { label: '电话', value: 'utel', readonly: 'readonly' },
          { label: '收货地址', value: 'dzsh', readonly: 'readonly' },
          { label: '留言', value: 'ly', readonly: 'readonly' },
          {
            label: '快递公司',
            value: 'kdgs',
          },
          {
            label: '快递单号',
            value: 'kddh',
          },
          {
            label: '合同类型',
            value: 'htlx',
            type: 'radio',
            option: [
              { label: '买断', value: '0' },
              { label: '日供', value: '1' },
              { label: '合作', value: '2' },
            ],
            defaultValue: '0',
            disabled: true,
            span: 24,
          },
        ],
        inputs2: [
          { label: '姓名', value: 'uxm', readonly: 'readonly' },
          { label: '电话', value: 'utel', readonly: 'readonly' },
          { label: '收货地址', value: 'dzsh', readonly: 'readonly' },
          { label: '留言', value: 'ly', readonly: 'readonly' },
          {
            label: '快递公司',
            value: 'kdgs',
            readonly: 'readonly',
          },
          {
            label: '快递单号',
            value: 'kddh',
            readonly: 'readonly',
          },
          {
            label: '合同类型',
            value: 'htlx',
            type: 'radio',
            option: [
              { label: '买断', value: '0' },
              { label: '日供', value: '1' },
              { label: '合作', value: '2' },
            ],
            defaultValue: '0',
            span: 24,
            disabled: true,
          },
        ],
        inputs3: [
          { label: '姓名', value: 'uxm', readonly: 'readonly' },
          { label: '电话', value: 'utel', readonly: 'readonly' },
          { label: '收货地址', value: 'dzsh', readonly: 'readonly' },
          { label: '留言', value: 'ly', readonly: 'readonly' },
          {
            label: '快递公司',
            value: 'kdgs',
            readonly: 'readonly',
          },
          {
            label: '快递单号',
            value: 'kddh',
            readonly: 'readonly',
          },
          {
            label: '合同类型',
            value: 'htlx',
            type: 'radio',
            option: [
              { label: '买断', value: '0' },
              { label: '日供', value: '1' },
              { label: '合作', value: '2' },
            ],
            defaultValue: '0',
            disabled: true,
            span: 24,
          },
        ],
        inputs4: [
          { label: '姓名', value: 'uxm', readonly: 'readonly' },
          { label: '电话', value: 'utel', readonly: 'readonly' },
          { label: '收货地址', value: 'dzsh', readonly: 'readonly' },
          { label: '留言', value: 'ly', readonly: 'readonly' },

          {
            label: '拒绝原因',
            value: 'bz',
            readonly: 'readonly',
          },
        ],
        USearch: [],
        formdata: {},
        loading: false,
        setgtelsfalg: false,
      }
    },
    computed: {
      tabledata() {
        let r = []
        if (this.formdata.ddxq) {
          r = this.formdata.ddxq.map((e) => {
            return {
              mc: e.ShopUserwp.mc,
              sl: e.ShopUserwpgmDetailed.sl,
              gg: e.ShopUserwpgmDetailed.gg,
            }
          })
        }
        return r
      },
    },
    mounted() {},
    methods: {
      ggsdataadd() {
        if (this.ggsstr == '') {
          return
        }
        if (this.ggsstr.length >= 10) {
          return
        }
        this.ggsdata.push(this.ggsstr)
        this.ggsstr = ''
      },
      ggsdatadel(index) {
        this.ggsdata.splice(index, 1)
      },
      async show(data = {}, asynccallback) {
        let formdata = this.$z.deepClone(data)
        console.log(formdata)
        this.title = '订单详情'
        this.inputs = []
        if (formdata.b_zt == 0) {
          formdata.ddzt = '1'
          let inputjson = this.$z.deepClone(this.inputs0)
          if (formdata.sjfhyj && formdata.sjfhyj != '') {
            inputjson[5].defaultValue = new Date(
              this.$z.timefn.getdateTime(formdata.sjfhyj)
            )
          } else {
            inputjson[5].defaultValue = new Date()
          }
          this.inputs = inputjson
        } else if (formdata.b_zt == 1) {
          this.inputs = this.$z.deepClone(this.inputs1)
        } else if (formdata.b_zt == 2) {
          this.inputs = this.$z.deepClone(this.inputs2)
        } else if (formdata.b_zt == 3) {
          this.inputs = this.$z.deepClone(this.inputs3)
        } else if (formdata.b_zt == 4) {
          this.inputs = this.$z.deepClone(this.inputs4)
        }

        this.formdata = formdata
        // this.ggsdata = this.formdata.ggs || []
        this.asynccallback = asynccallback
        this.dialogVisible = true
      },
      wordlook() {
        this.dialogVisible = false
        this.$refs.worddow.show(
          this.formdata,
          this.formdata.b_zt,
          this.asynccallback
        )
      },
      async getdata() {
        // sutype:
      },
      async updatafn() {
        this.loading = true
        let formdata = await this.$refs['formz'].validate()
        delete formdata.ddxq
        if (formdata.b_zt == 0) {
          formdata.b_zt = formdata.ddzt == 1 ? '1' : '4'
        } else if (formdata.b_zt == '1') {
          formdata.b_zt = '2'
        }

        let url = '/ShopUserwpgmedt'
        let { data } = await this.$z.$axios.post(url, formdata).catch(() => {
          this.loading = false
        })
        let par = this.$z.parfn(data)
        if (par.value == 'succeed') {
          this.$message.success(par.label)
        } else {
          this.$message.error(par.label)
        }
        this.loading = false
        this.asynccallback()
        this.dialogVisible = false
        if (formdata.b_zt == 1) {
          this.$refs.worddow.show(
            { ...this.formdata, ...formdata },
            this.formdata.b_zt,
            this.asynccallback
          )
        }
      },
      close() {
        this.dialogVisible = false
      },
      openfn() {},
    },
  }
</script>
<style lang="scss">
  .baseflex {
    display: flex;
    align-items: center;
  }
  .useritem {
    height: 40px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    &.active {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  .span12 .el-form-item {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    padding: 10px;
  }
</style>
